<template>
	<div class="login-back">
		<el-form ref="form" :model="user" :rules="rules" class="login-box">
			<h3 class="login-title">欢迎使用OA系统</h3>
			<el-form-item label="账号" prop="userLoginame">
				<el-input type="text" placeholder="请输入用户名" v-model="user.userLoginame" @keyup.enter.native="onSubmit('form')"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="userPassword">
				<el-input type="password" placeholder="请输入密码" v-model="user.userPassword" @keyup.enter.native="onSubmit('form')"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit('form')" class="login-submit">登录</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import qs from 'qs'
	import {
		ElMessage
	} from 'element-plus'
	export default {
		data() {
			return {
				user: {
					userLoginame: '',
					userPassword: ''
				},
				rules: {
					userLoginame: [{
						required: true,
						message: '用户名不能为空',
						trigger: 'blur'
					}],
					userPassword: [{
						required: true,
						message: '密码不能为空',
						trigger: 'blur'
					}]
				},
				users: []

			}
		},
		methods: {
			onSubmit(user) {
				this.$refs[user].validate((valid) => {
					if (valid) {
						let that = this
						let str = qs.stringify(that.user)
						console.log(this.user)
						this.$axios.get("http://localhost:8080/user/search?" + str).then(function(res) {
							console.log(res);
							if (res.data.length != 0) {
								that.$router.push("/content")
								that.$store.commit('user', res.data[0])
								console.log(that.$store.state.user)
							}else{
								ElMessage({
									message: '用户名或密码错误',
									type: 'warning'
								});
							}
						})
					} else {
						ElMessage({
							message: '请输入用户名或密码',
							type: 'warning'
						});
					}
				})
			}
		}
	}
</script>

<style>
	.login-box {
		width: 350px;
		margin: 150px auto;
		border: 1px solid #DCDFE6;
		padding: 20px;
		border-radius: 5px;
		box-shadow: 0 0 30px #DCDFE6;
		background-color: white;
		opacity: 0.95;
	}

	.login-title {
		text-align: center;
	}

	.login-submit {
		margin: auto;
	}

	.login-back {
		background: url("@/assets/loginBack.jpeg");
		background-size: 100% 100%;
		height: 100%;
		position: fixed;
		width: 100%;
	}
</style>
